<template>
  <div class="body">
    <a-card class="card" title="密码修改">
      <a-form-model ref="form" :model="form" :rules="rules" >
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="用户账号"
          prop="userzh"
        >
          <a-input placeholder="用户账号" v-model="form.userzh" :disabled="true"/>
        </a-form-model-item>
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="用户名"
          prop="username"
        >
          <a-input placeholder="用户名" v-model="form.username" :disabled="true"/>
        </a-form-model-item>
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="所在部门"
          prop="szbm"
        >
          <a-input placeholder="所在部门"  v-model="form.szbm" :disabled="true"/>
        </a-form-model-item>
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="密码"
          prop="pwd"
          has-feedback
        >
          <a-input placeholder="密码" type="password" v-model="form.pwd" autocomplete="off"/>
        </a-form-model-item>
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="确认密码"
          prop="newpwd"
          has-feedback
        >
          <a-input placeholder="确认密码" type="password" v-model="form.newpwd" autocomplete="off"/>
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 14, offset: 5 }">
      <a-button type="primary" @click="submitForm('form')">
        提交
      </a-button>
      <a-button style="margin-left: 10px" @click="resetForm('form')">
        重置
      </a-button>
    </a-form-model-item>
      </a-form-model>
    </a-card>
  </div>
</template>

<script>
import {modifyPassWord} from '../../api/api'
export default {
  data() {
    const numtest = /(?=.*\d)(?=.*[a-zA-Z])/
    let validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码!'));
      } else if(value.length < 7){
        if(numtest.test(value) == false)
        {
          callback(new Error('设置密码必须包含数字和字符'));
        }else
        {
          callback(new Error('密码必须大于7位!'));
        }
        console.log(numtest.test(value),'1111');
       
      }else{
        if (this.form.newpwd !== '') {
          this.$refs.form.validateField('newpwd');
        }
        callback();
      }
    };
    let validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请重新输入密码'));
      } else if (value !== this.form.pwd) {
        callback(new Error("两次密码输入不一致!"));
      } else {
        callback();
      }
    };
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      form: { userzh: "", username: "",szbm:"",pwd:"" ,newpwd:""},
      rules:{
        pwd: [{ validator: validatePass, trigger: 'change'}],
        newpwd: [{ validator: validatePass2, trigger: 'change' }],
      }
    };
  },
  mounted(){
      this.getmsg()
  },
  methods:{
    getmsg(){
      const obj = JSON.parse(localStorage.getItem('user'))
      this.form.userzh = obj.userid
      this.form.username = obj.username
      this.form.szbm = obj.deptname
    },
    submitForm(formName) {
   
      this.$refs[formName].validate(async valid => {
        if (valid) {
          const params = {
            no:this.form.userzh,
            passwWord:this.form.newpwd
          }
          const data = await modifyPassWord(params)
          if(data.code == 200)
          {
            this.$success({
            title: "密码修改成功",
            okText: "确定",
          });
          this.form.pwd = ''
          this.form.newpwd = ''
          }
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields(['pwd','newpwd']);
      this.getmsg()
    }
  }
};
</script>

<style lang="less" scoped>
.body {
  display: flex;
  justify-content: center;
}
.card {
  width: 50%;
  height: 500px;
}
</style>